import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {UtilComponent} from '../../interface/util-component.interface';
import Map from 'ol/Map';

@Component({
    selector: 'kylin-teleporting-maps',
    templateUrl: './teleporting-maps.component.html',
    styleUrls: ['./teleporting-maps.component.less'],
    encapsulation: ViewEncapsulation.None
})
export class TeleportingMapsComponent implements OnInit, UtilComponent {

    hasContent = true;
    map: Map;

    @Input() set data(val) {
        Object.assign(this, val);
    }

    originId: any;
    originEle: HTMLElement;
    newTargetId: string;
    newTargetEle: HTMLElement;
    curTargetId: any;
    originSize: any;

    constructor() {
    }

    ngOnInit() {
        this.turnOn();
    }

    turnOn() {
        if (this.map) {
            const size = this.map.getSize();
            this.originSize = size;

            this.originId = this.map.getTarget();
            this.curTargetId = this.originId;
            this.originEle = this.map.getTargetElement();
            this.newTargetId = this.originId + 'New';
            const divElement = document.createElement('div');
            divElement.id = this.newTargetId;
            divElement.className = 'map';
            divElement.style.width = '100%';
            divElement.style.height = size[1] / 2 + 'px';
            divElement.style.position = 'position';
            divElement.style.top = size[1] / 2 + 'px';
            divElement.style['border-top'] = '8px solid #fff';

            this.originEle.className = 'map';
            this.originEle.style.width = '100%';
            this.originEle.style.height = size[1] / 2 + 'px';
            this.originEle.parentNode.insertBefore(divElement, this.originEle.nextElementSibling);
            this.newTargetEle = divElement;

            this.map.setSize([size[0], size[1] / 2]);
        }
    }

    turnOff() {
        this.map.setTarget(this.originId);
        this.map.setSize(this.originSize);
        this.originEle.style.height = this.originSize[1] + 'px';
        this.newTargetEle.remove();
    }

    cancel(options?: any): any {
        this.turnOff();
    }

    teleport() {
        this.curTargetId = this.curTargetId === this.originId ? this.newTargetId : this.originId;
        this.map.setTarget(this.curTargetId);
    }
}
